<template>
  <div class="search-info">
    <div class="title">查询个人信息</div>
    <van-form @submit="onSubmit">
      <!-- 姓名 -->
      <van-field
        v-model="username"
        name="姓名"
        label="姓名"
        placeholder="请输入您的姓名"
        :rules="[{ required: true }]"
      />
      <!-- 手机号码 -->
      <van-field
        v-model="phone"
        name="+86"
        label="+86"
        placeholder="请输入手机号码"
        :rules="[{ required: true }]"
      />
      <div style="margin: 96px 16px 0">
        <van-button
          style="borderradius: 4px"
          square
          block
          type="info"
          native-type="submit"
        >查询</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: '',
      phone: '',
      text: ''
    }
  },
  methods: {
    onSubmit() {
      this.$axios({
        method: 'post',
        url: `/user/info/search?phone=${this.phone}&username=${this.username}`,
        data: {}
      }).then((res) => {
        console.log(res)
        if (res.data.code === 200) {
          this.$router.push({ name: 'searchResult', params: res.data.data })
        }
      })
    }
  }
}
</script>
<style scoped>
.title {
  font-size: 20px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: #333;
  line-height: 20px;
  background: #f0f2f5;
  padding: 20px 16px;
  text-align: center;
}
.item-block {
  margin-bottom: 12px;
}
</style>
